<template>
  <div class="shopping_cart" :style=" result.freightpol ? 'padding-bottom: 1rem' : 'padding-bottom: 1.3rem' ">
    <Header :title="title"></Header>
    <div v-if=" list.length > 0">
      <section  v-for="(item,i) in list" :key="i">
        <header>
          <img
            @click="getCheckState(loginInfo,!choiceOrNos[i],skuIds[i])"
            :src="[choiceOrNos[i] ? checkedurl : defulturl ]"
          >
          <p>
            {{item.dealerName}}
            <img src="../../assets/right-fill.png" >
          </p>
        </header>
        <van-swipe-cell class="goods" :right-width="120" v-for="(item,index) in item.groupGoodsVoList[0].shoppingCartGoodsResponseVo" :key="index" >
          <van-cell-group>
            <img
              class="checked"
              @click="getCheckState(loginInfo,!goodsInfo[i][index].choiceOrNo,goodsInfo[i][index].skuId)"
              :src="[goodsInfo[i][index].choiceOrNo ? checkedurl : defulturl ]"
            >
            <img class="picture" :src="item.picUrl" alt="图片">
            <div class="goodInfo">
              <p>{{item.goodsName}}</p>
              <div class="price">
                <p>
                  <span>￥</span>
                  {{item.originalPrice | numFilter}}
                </p>
                <div>
                  <span v-if="item.secondQuantity">{{item.secondQuantity}}{{item.secondUnit}}</span>
                  <span v-if="item.firstQuantity">{{item.firstQuantity}}{{item.firstUnit}}</span>
                </div>
              </div>
              <div class="quantity">
                <div class="decrease" @click="decreaseModify(loginInfo,i,index)">
                  -
                  <img src="../../assets/zuo@3x.png">
                </div>
                <div class="number">
                  {{item.totalQuantity}}
                  <img src="../../assets/zhong@2x.png">
                </div>
                <div
                  class="add"
                  v-if="goodsInfo[i][index].totalQuantity < goodsInfo[i][index].stock"
                  @click="addModify(loginInfo,i,index)"
                >
                  +
                  <img src="../../assets/you@3x.png">
                </div>
                <div class="add" v-else @click="hint(i,index)">
                  +
                  <img src="../../assets/you@3x.png">
                </div>
              </div>
            </div>
          </van-cell-group>
          <span class="collect" @click="collectGood(loginInfo,i,index)" slot="right">收藏</span>
          <span class="delete" @click="deleteGood(loginInfo,i,index)" slot="right">删除</span>
        </van-swipe-cell>
        <div class="total">
          <p>￥{{item.totalAmount | numFilter}}</p>
          <p>已省：-￥{{item.savedAmount | numFilter}}</p>
        </div>
      </section>
      <div class="bottom">
        <div class="img">
          <img
            @click="getCheckState(loginInfo,!CheckState,AllGoodSkuId)"
            :src="[ CheckState ? checkedurl : defulturl ]"
          >
        </div>
        <div class="totalAmount">
          <div class="left">
            <p>全选</p>
            <div>
              <p>
                合计:
                <span>￥{{result.totalAmount | numFilter}}</span>
              </p>
              <p>已省：￥{{result.savedAmount | numFilter}}</p>
            </div>
          </div>
          <p @click="confirmOrder()" :style=" result.freightpol ? 'background-color: #d33' : 'background-color: #999' ">{{payment}}</p>
        </div>
        <p class="require" v-if=" result.freightmoney-result.totalAmount >= 0 ">
          您未满足
          <span style="color: #d33">99.00元</span>
          起订要求，还差
          <span style="color: #d33">{{ result.freightmoney-result.totalAmount | numFilter}}元</span>
        </p>
      </div>
    </div>
    <div class="vacancy" v-if=" list.length <= 0">
      <img src="../../assets/ic_no_cart.png" alt="">
      <p>您的购物车暂无商品</p>
    </div>
  </div>
</template>

<script>
import Header from "@/components/Header.vue";
import api from "../../utils/api";
import axios from "axios";
import store from "../../store";
import qs from "qs";
export default {
  name: "shopping_cart",
  components: {
    Header
  },
  data() {
    return {
      title: "购物车",
      defulturl: require("../../assets/defult-check-icon.png"),
      checkedurl: require("../../assets/checked-icon.png"),
      loginInfo: {},
      result: [],
      list: [],
      goodsInfo: [],
      choiceOrNos: [],
      skuIds: [],
      payment: "",
    };
  },
  computed: {
    CheckState() {
      var that = this;
      var CheckState = true;
      for (let i = 0; i < that.choiceOrNos.length; i++) {
        if (!that.choiceOrNos[i]) {
          CheckState = that.choiceOrNos[i];
        }
      }
      return CheckState;
    },
    AllGoodSkuId() {
      var that = this;
      let skuIds = [];
      for (let i = 0; i < that.goodsInfo.length; i++) {
        let str = "";
        for (let j = 0; j < that.goodsInfo[i].length; j++) {
          str += that.goodsInfo[i][j].skuId + ",";
        }
        skuIds.push(str);
      }
      skuIds = that.skuIds.join("");
      return skuIds;
    }
  },
  methods: {
    // 请求购物车
    getShoppingCart(loginInfo) {
      var that = this;
      api
        .post(
          "/getShoppingCart",
          {
            userId: loginInfo.userId,
            merchantId: loginInfo.merchantId,
            siteId: loginInfo.stationId,
            shopId: loginInfo.storeId,
            provId: loginInfo.provId,
            cityId: loginInfo.cityId,
            countyId: loginInfo.countyId,
            streetId: loginInfo.streetId,
            storeId: loginInfo.storeCustId
          },
          "get"
        )
        .then(res => {
          if (res.data.status.statusCode === 0) {
            that.result = res.data.result;
            that.list = res.data.result.validShoppingCartDealerVos;
            for (let i = 0; i < that.list.length; i++) {
              that.goodsInfo[i] =
                that.list[i].groupGoodsVoList[0].shoppingCartGoodsResponseVo;
            }
            that.AllGoodSkuIds();
            that.AllCheckState();
            that.paymentStates();
          } else {
            console.log(res);
          }
        });
    },
    // 选中
    getCheckState(loginInfo, choiceOrNo, skuIds) {
      var that = this;
      api
        .post(
          "/modifyCheckState",
          qs.stringify({
            userId: loginInfo.userId,
            merchantId: loginInfo.merchantId,
            siteId: loginInfo.stationId,
            shopId: loginInfo.storeId,
            provId: loginInfo.provId,
            cityId: loginInfo.cityId,
            countyId: loginInfo.countyId,
            streetId: loginInfo.streetId,
            storeId: loginInfo.storeCustId,
            isCheck: choiceOrNo,
            skuIds: skuIds
          }),
          "post"
        )
        .then(res => {
          if (res.data.status.statusCode === 0) {
            that.result = res.data.result;
            that.list = res.data.result.validShoppingCartDealerVos;
            for (let i = 0; i < that.list.length; i++) {
              that.goodsInfo[i] =
                that.list[i].groupGoodsVoList[0].shoppingCartGoodsResponseVo;
            }
            that.AllGoodSkuIds();
            that.AllCheckState();
            that.paymentStates();
          } else {
            console.log(res);
          }
        });
    },
    // 全部的skuId
    AllGoodSkuIds() {
      var that = this;
      let skuIds = [];
      for (let i = 0; i < that.goodsInfo.length; i++) {
        let str = "";
        for (let j = 0; j < that.goodsInfo[i].length; j++) {
          str += that.goodsInfo[i][j].skuId + ",";
        }
        skuIds.push(str);
      }
      that.skuIds = skuIds;
    },
    // 全部的选中状态
    AllCheckState() {
      var that = this;
      var choiceOrNos = [],
        initState = true;
      for (let i = 0; i < that.goodsInfo.length; i++) {
        for (let j = 0; j < that.goodsInfo[i].length; j++) {
          if (that.goodsInfo[i][j].choiceOrNo) {
            initState = true;
          } else if (!that.goodsInfo[i][j].choiceOrNo) {
            initState = false;
            break;
          }
        }
        choiceOrNos.push(initState);
      }
      that.choiceOrNos = choiceOrNos;
    },
    // 减少
    decreaseModify(loginInfo, i, j) {
      var that = this;
      let firstQuantity = that.goodsInfo[i][j].totalQuantity;
      firstQuantity--;
      if (firstQuantity <= 0) {
        console.log("不能再少了");
      } else {
        that.Modify(loginInfo, i, j, firstQuantity);
      }
    },
    // 增加
    addModify(loginInfo, i, j) {
      var that = this;
      let firstQuantity = that.goodsInfo[i][j].totalQuantity;
      firstQuantity++;
      that.Modify(loginInfo, i, j, firstQuantity);
    },
    // 修改数量
    Modify(loginInfo, i, j, firstQuantity) {
      var that = this;
      api
        .post(
          "/modify",
          {
            choiceOrNo: that.goodsInfo[i][j].choiceOrNo,
            cityId: loginInfo.cityId,
            countyId: loginInfo.countyId,
            dealerId: that.goodsInfo[i][j].dealerId,
            dealerOrgId: that.goodsInfo[i][j].dealerOrgId,
            firstQuantity: firstQuantity,
            firstUnit: that.goodsInfo[i][j].firstUnit,
            merchantId: loginInfo.merchantId,
            provId: loginInfo.provId,
            secondQuantity: that.goodsInfo[i][j].thirdQuantity,
            secondUnit: that.goodsInfo[i][j].secondUnit,
            shopId: loginInfo.storeId,
            siteId: loginInfo.stationId,
            skuId: that.goodsInfo[i][j].skuId,
            storeId: loginInfo.storeCustId,
            streetId: loginInfo.streetId,
            thirdQuantity: that.goodsInfo[i][j].thirdQuantity,
            thirdUnit: that.goodsInfo[i][j].thirdUnit,
            userId: loginInfo.userId
          },
          "post"
        )
        .then(res => {
          if (res.data.status.statusCode === 0) {
            that.result = res.data.result;
            that.list = res.data.result.validShoppingCartDealerVos;
            for (let i = 0; i < that.list.length; i++) {
              that.goodsInfo[i] =
                that.list[i].groupGoodsVoList[0].shoppingCartGoodsResponseVo;
            }
            that.paymentStates();
          } else {
            console.log(res);
          }
        });
    },
    // 提示库存数量
    hint() {
      alert("没有库存了");
    },
    // 结算字段
    paymentStates() {
      var that = this;
      if (that.result.totalAmount >= that.result.freightmoney) {
        that.payment = "去结算";
      } else if (that.result.totalAmount < that.result.freightmoney) {
        that.payment = "￥99.00起配";
      }
    },
    // 删除商品
    deleteGood(loginInfo, i, j) {
      var that = this;
        api.post("/delete",qs.stringify({
              userId: loginInfo.userId,
              merchantId: loginInfo.merchantId,
              siteId: loginInfo.stationId,
              shopId: loginInfo.storeId,
              provId: loginInfo.provId,
              cityId: loginInfo.cityId,
              countyId: loginInfo.countyId,
              streetId: loginInfo.streetId,
              storeId: loginInfo.storeCustId,
              skuId: that.goodsInfo[i][j].skuId
            }),"post")
        .then(res => {
          if (res.data.status.statusCode === 0) {
            that.result = res.data.result;
            that.list = res.data.result.validShoppingCartDealerVos;
            for (let i = 0; i < that.list.length; i++) {
              that.goodsInfo[i] =
                that.list[i].groupGoodsVoList[0].shoppingCartGoodsResponseVo;
            }
            that.paymentStates();
          } else {
            console.log(res);
          }
        });
    },
    // 收藏商品
    collectGood(loginInfo, i, j) {
      var that = this;
        api.post("/goodsColl/add",{
              userId: loginInfo.userId,
              source:1,
              skuId: that.goodsInfo[i][j].skuId
            },"post")
        .then(res => {
          if (res.data.status.statusCode === 0) {
            console.log(res.data.result)
            if (that.result.totalAmount >= that.result.freightmoney) {
              that.payment = "去结算";
            } else if (that.result.totalAmount < that.result.freightmoney) {
              that.payment = "￥99.00起配";
            }
          } else {
            console.log(res);
          }
        });
    },
    // 结算
    confirmOrder() {
      var that = this;
      var resultchang = {
        allSelect: true,
        noStockOrderGoodsVoList: that.result.noStockOrderGoodsVoList,
        cityId: that.loginInfo.cityId,
        countyId: that.loginInfo.countyId,
        freightmoney: that.result.freightmoney,
        freightpol: that.result.freightpol,
        goodsCount: that.result.goodsCount,
        guestExclusiveFlag: that.result.guestExclusiveFlag,
        invalidShoppingCartDealerVos: that.result.invalidShoppingCartDealerVos,
        isUseMutiCoupon: that.result.isUseMutiCoupon,
        merchantId: that.loginInfo.merchantId,
        provId: that.loginInfo.provId,
        salesPlatformEnum: that.result.salesPlatformEnum,
        salesTerminalEnum: that.result.salesTerminalEnum,
        savedAmount: that.result.savedAmount,
        shopId: that.loginInfo.storeId,
        shopName: "98645849649197",
        siteId: that.loginInfo.stationId,
        storeId: that.loginInfo.storeCustId,
        streetId: that.loginInfo.streetId,
        totalAmount: that.result.totalAmount,
        userId: that.loginInfo.userId,
        validShoppingCartDealerVos: that.result.validShoppingCartDealerVos
      };
      api.post("/confirmOrder",resultchang,"post")
      .then(res=>{
          if(res.data.status.statusCode === 0){
              console.log(res)
          }else{
              console.log(res)
          }
      })
    }
  },
  mounted() {
    var that = this;
    setTimeout(() => {
      var loginInfo = that.$store.state.loginInfo;
      if (typeof loginInfo == "string") {
        loginInfo = JSON.parse(that.$store.state.loginInfo);
        that.loginInfo = loginInfo;
      } else if (typeof loginInfo == "object" && that.$store.state.token) {
        loginInfo = that.$store.state.loginInfo;
        that.loginInfo = loginInfo;
      }
      that.getShoppingCart(loginInfo);
      that.paymentStates();
    }, 150);
  }
};
</script>

<style lang="scss" scoped>
.shopping_cart {
  section {
    header {
      padding: 0.1rem 0.14rem;
      height: 0.2rem;
      background-color: #f8f8f8;
      > img {
        width: 0.16rem;
        height: 0.16rem;
        float: left;
      }
      p {
        font-size: 14px;
        color: #333;
        line-height: 0.2rem;
        text-align: left;
        margin-left: 0.3rem;
        > img {
          width: 0.14rem;
          height: 0.14rem;
          vertical-align: middle;
        }
      }
    }
    .goods {
      padding: .15rem .14rem;
      height: .95rem;
      .checked {
        width: 0.16rem;
        height: 0.16rem;
        margin: 0.315rem 0;
        float: left;
      }
      .picture {
        width: 1rem;
        height: 1rem;
        margin-left: 0.1rem;
        float: left;
      }
      .goodInfo {
        width: 60%;
        height: 1rem;
        padding-left: 0.1rem;
        float: left;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        > p {
          font-size: 0.12rem;
          line-height: 0.2rem;
          color: #666;
          text-align: left;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
        .price {
          display: flex;
          justify-content: space-between;
          align-items: center;
          > p {
            font-size: 0.18rem;
            color: #d33;
            text-align: left;
            > span {
              color: #d33;
              font-size: 0.14rem;
            }
          }
          > div {
            font-size: 0.14rem;
            color: #999;
          }
        }
        .quantity {
          height: 0.3rem;
          display: flex;
          justify-content: flex-end;
          font-size: 0.2rem;
          .decrease {
            width: 0.26rem;
            height: 0.26rem;
            line-height: 0.24rem;
            border-top-left-radius: 0.03rem;
            border-bottom-left-radius: 0.03rem;
            background-color: #f2f1f6;
            position: relative;
            img {
              width: 0.26rem;
              height: 0.26rem;
              position: absolute;
              top: 0;
              left: 0;
            }
          }
          .number {
            width: 0.54rem;
            height: 0.26rem;
            line-height: 0.26rem;
            color: #333;
            font-size: 0.12rem;
            position: relative;
            img {
              width: 0.54rem;
              height: 0.26rem;
              position: absolute;
              top: 0;
              left: 0;
            }
          }
          .add {
            width: 0.26rem;
            height: 0.26rem;
            line-height: 0.26rem;
            border-top-left-radius: 0.03rem;
            border-bottom-left-radius: 0.03rem;
            background-color: #f2f1f6;
            position: relative;
            img {
              width: 0.26rem;
              height: 0.26rem;
              position: absolute;
              top: 0;
              left: 0;
            }
          }
        }
      }
      .collect{
        display: block;
        width: .6rem;
        height: 1.25rem;
        line-height: 1.25rem;
        margin-top: -0.15rem;
        margin-left: .15rem;
        float: left;
        color: #fff;
        background-color: #999;
      }
      .delete {
        display: block;
        width: .6rem;
        height: 1.25rem;
        line-height: 1.25rem;
        margin-top: -0.15rem;
        float: right;
        color: #fff;
        background-color: red;
      }
    }
    .total {
      padding: 0.04rem 0.14rem;
      height: 0.5rem;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: flex-end;
      position: relative;
      > p:nth-of-type(1) {
        color: #333;
        font-size: 0.18rem;
        font-weight: bold;
      }
      > p:nth-of-type(2) {
        color: #d33;
        font-size: 0.12rem;
      }
    }
    .total:after {
      content: "";
      width: 100%;
      height: 0.01rem;
      transform: scaleY(0.5);
      background-color: #f2f1f6;
      position: absolute;
      top: 0;
      left: 0;
    }
  }
  .bottom {
    width: 3.6rem;
    padding-left: 0.14rem;
    background-color: #fff;
    bottom: 0.5rem;
    position: fixed;
    z-index: 5;
    .img {
      margin-top: 0.16rem;
      float: left;
      > img {
        width: 0.16rem;
        height: 0.16rem;
      }
    }
    .totalAmount {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 0.5rem;
      border-top: 0.005rem solid #f7f7f7;
      background-color: white;
      z-index: 6;
      .left {
        display: flex;
        flex: 1;
        align-items: center;
        > p {
          color: #666;
          font-size: 0.14rem;
          margin-left: 0.07rem;
          margin-right: 0.12rem;
        }
        > div {
          height: 0.5rem;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          text-align: left;
          > p:nth-of-type(1) {
            font-size: 0.16rem;
            color: #333;
            > span {
              color: #d33;
            }
          }
          > p:nth-of-type(2) {
            font-size: 0.1rem;
            color: #666;
          }
        }
      }
      > p {
        display: flex;
        width: 1.2rem;
        height: 0.5rem;
        font-size: 0.16rem;
        justify-content: center;
        align-items: center;
        color: white;
      }
    }
    .require {
      width: 93%;
      height: 0.3rem;
      line-height: 0.3rem;
      background: #fef9ef;
      font-size: 0.12rem;
      text-align: left;
      color: #333;
      padding: 0 0.13rem;
      position: absolute;
      bottom: 0.5rem;
      left: 0;
    }
  }
  .vacancy{
    width: 100%;
    background-color: #f2f1f6;
    position: absolute;
    left: 0;
    top: .45rem;
    padding: 50% 0;
    >img{
      width: .6rem;
      height: .6rem;
    }
    >P{
      width: 100%;
      font-size: .12rem;
      color: #999;
      margin-top: .1rem;
      padding-bottom: 50%;
    }
  }
}
</style>
